<template>
  <NSpace justify="center">
    <NCard class="main-view">
      <!-- 登录面板 -->
      <n-tabs default-value="signin" size="large" animated pane-wrapper-style="margin: 0 -4px"
        pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
        <n-tab-pane name="signin" tab="登录">
          <n-form ref="loginFormRef" :model="loginValue" :rules="loginRules">
            <n-form-item-row label="用户名" path="name">
              <n-input v-model:value="loginValue.name" placeholder="请输入用户名" />
            </n-form-item-row>
            <n-form-item-row label="密码" path="password">
              <n-input v-model:value="loginValue.password" placeholder="请输入密码" type="password" />
            </n-form-item-row>
          </n-form>
          <br>
          <n-button type="primary" block secondary strong @click="login">
            登录
          </n-button>
        </n-tab-pane>
        <!-- 注册面板 -->
        <n-tab-pane name="signup" tab="注册">
          <n-form ref="registerFormRef" :model="registerValue" :rules="registerRules">
            <n-form-item-row label="用户名" path="account">
              <n-input v-model:value="registerValue.account" placeholder="请输入用户名" />
            </n-form-item-row>
            <n-form-item-row label="昵称" path="nickname">
              <n-input v-model:value="registerValue.nickname" placeholder="请输入昵称" />
            </n-form-item-row>
            <n-form-item-row label="密码" path="password">
              <n-input v-model:value="registerValue.password" type="password" placeholder="请设置密码" />
            </n-form-item-row>
            <n-form-item-row label="重复密码" path="repassword">
              <n-input :disabled="!registerValue.password" v-model:value="registerValue.repassword" type="password"
                placeholder="请重复密码" />
            </n-form-item-row>
          </n-form>
          <n-button type="primary" block secondary strong @click="register">
            注册
          </n-button>
        </n-tab-pane>
      </n-tabs>
    </NCard>
  </NSpace>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { NCard, NTabs, NTabPane, NButton, NForm, NInput, NFormItemRow, NSpace } from "naive-ui";
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
import { loginStatus } from '@/stores/counter'
import loginUitls from "@/api/user";


const login_status = loginStatus();

// 表单响应值
const loginFormRef = ref<FormInst | null>(null)
const registerFormRef = ref<FormInst | null>(null)

// 表单绑定数据
const loginValue = ref({ name: '', password: '' });
const registerValue = ref({ account: '', nickname: '', password: '', repassword: '' });

// 表单验证函数
function validatePasswordStartWith(
  rule: FormItemRule,
  value: string
): boolean {
  return (
    !!registerValue.value.password
    && registerValue.value.password.startsWith(value)
    && registerValue.value.password.length >= value.length
  )
}
function validatePasswordSame(rule: FormItemRule, value: string): boolean {
  return value === registerValue.value.password
}

// 表单验证规则
const loginRules = {
  name: {
    required: true,
    message: '请输入用户名',
    trigger: ['input', 'blur']
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['input', 'blur']
  }
};
const registerRules = {
  account: {
    required: true,
    message: '请输入用户名',
    trigger: ['input', 'blur']
  },
  nickname: {
    required: true,
    message: '请输入用户名',
    trigger: ['input', 'blur']
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['input', 'blur']
  },
  repassword: [{
    required: true,
    message: '',
    trigger: ['input', 'blur']
  },
  {
    validator: validatePasswordStartWith,
    message: '两次密码输入不一致',
    trigger: 'input'
  },
  {
    validator: validatePasswordSame,
    message: '两次密码输入不一致',
    trigger: ['blur', 'password-input']
  }

  ]
};

// 处理登录事件
function login(e: Event) {
  e.preventDefault()
  loginFormRef.value?.validate((errors) => {
    if (!errors) {
      window.$utils.message.info('正在登录');

      loginUitls.login({ name: loginValue.value.name, password: loginValue.value.password }).then(() => {
        window.$utils.message.success('登录成功');
      });
    }
    else {
      console.log(errors)
      window.$utils.message.error("请完善登录信息");
    }
  })
}

// 处理注册事件
async function register(e: Event): Promise<void> {
  e.preventDefault()
  registerFormRef.value?.validate(async (errors) => {
    if (!errors) {
      window.$utils.message.info('正在注册');
      loginUitls.register({ name: registerValue.value.account, nickname: registerValue.value.nickname, password: registerValue.value.password }).then(() => {
        window.$utils.message.success('注册成功');
      });
    }
    else {
      console.log(errors)
      window.$utils.message.error("请完善注册信息");
    }
  })
}




</script>

<style scoped>
.main-view {
  margin-top: 2rem;
  width: 20rem;
  max-width: 100%;
}
</style>